<template>
  <div class="sale">
    <el-card>
      <template slot="header">
        <div class="header">
          <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
            <el-tab-pane label="销售额" name="sale"></el-tab-pane>
            <el-tab-pane label="访问量" name="vist"></el-tab-pane>
          </el-tabs>
          <div class="rightContext">
            <span class="item" @click="setDay">今日</span>
            <span class="item" @click="setWeek">本周</span>
            <span class="item" @click="setMonth">本月</span>
            <span class="item" @click="setYear">本年</span>
            <el-date-picker
              v-model="date"
              class="date"
              size="mini"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
          </div>
        </div>
        <div class="center">
            <el-row :gutter="10">
                <el-col :span="18">
                  <div ref="chart" class="chart" />
                </el-col>
                <el-col :span="6" class="right">
                  <h3>门店{{ title }}排名</h3>
                  <ul>
                    <li>
                      <span class="rindex">0</span>
                      <span>肯德基</span>
                      <span class="rvalue">123456</span>
                    </li>
                    <li>
                      <span class="rindex">1</span>
                      <span>肯德基</span>
                      <span class="rvalue">123456</span>
                    </li>
                    <li>
                      <span class="rindex">3</span>
                      <span>肯德基</span>
                      <span class="rvalue">123456</span>
                    </li>
                    <li>
                      <span class="rindex">4</span>
                      <span>肯德基</span>
                      <span class="rvalue">123456</span>
                    </li>
                    <li>
                      <span class="rindex">5</span>
                      <span>肯德基</span>
                      <span class="rvalue">123456</span>
                    </li>
                    <li>
                      <span class="rindex">6</span>
                      <span>肯德基</span>
                      <span class="rvalue">123456</span>
                    </li>
                    <li>
                      <span class="rindex">7</span>
                      <span>肯德基</span>
                      <span class="rvalue">123456</span>
                    </li>
                  </ul>
                </el-col>
              </el-row>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script>
import  moment  from "moment";
import * as echarts from 'echarts'
export default {
  name: 'Sale',
  data() {
    return {
      activeName: 'sale',
      //收集日历数据
      date: [],
      barChart: null,
      option: {}
    }
  },
  computed: {
    title() {
      return this.activeName === 'sale' ? '销售额' : '访问量'
    }
  },
  mounted() {
    this.barChart = echarts.init(this.$refs.chart)
    this.uploadEchart()
  },
  methods: {
    //   tab切换
    handleClick() {
      this.uploadEchart()
    },
    // 加载图表
    uploadEchart() {
      this.option = {
        title: {
          text: this.title+'趋势'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: this.title,
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220, 100, 200, 300, 100, 200],
            barWidth: 30
          }
        ]
      }
      this.barChart.setOption(this.option)
    },
    // 设置今天
    setDay(){
        const day = moment().format('YYYY-MM-DD')
        this.date=[day,day]
    },
    setWeek(){
        const start = moment().day(1).format('YYYY-MM-DD')
        const end = moment().day(7).format('YYYY-MM-DD')
        this.date=[start,end]
    },
    setMonth(){
        const start = moment().startOf('month').format('YYYY-MM-DD')
        const end = moment().endOf('month').format('YYYY-MM-DD')
        this.date=[start,end]
    },
    setYear(){
        const start =moment().startOf('year').format('YYYY-MM-DD')
        const end =moment().endOf('year').format('YYYY-MM-DD')
        this.date=[start,end]
    }
  }
}
</script>

<style lang="scss" scoped>
.sale {
  margin-top: 20px;
  .header {
    display: flex;
    justify-content: space-between;
    position: relative;
    // align-items: center;
    .tabs {
      width: 100%;
    }
    .rightContext {
      position: absolute;
      right: 0;
      .item {
        margin-right: 20px;
      }
      .date {
        width: 300px;
      }
    }
  }
  .center{
      .chart {
        width: 100%;
        height: 300px;
      }
      .right {
        ul {
          list-style: none;
          width: 100%;
          height: 300px;
          padding: 0px;
        }
        ul li {
          height: 8%;
          margin: 10px 0px;
        }
        .rindex {
          float: left;
          width: 20px;
          height: 20px;
          line-height: 20px;
          border-radius: 50%;
          background: black;
          color: white;
          text-align: center;
          margin-right: 25px;
        }
        .rvalue {
          float: right;
        }
      }
  }
  ::v-deep .el-card__header {
    border: none;
  }
}
</style>
